<template>
  <div>
    <template>
      <el-table :data="vipList" border style="width: 100%">
        <el-table-column
          prop="orderDetail"
          align="center"
          label="vip图片"
          width="130"
        >
          <!-- 插槽作用域 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="60"
              fit="scale-down"
              :src="scope.row.imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="description" label="产品描述" width="180">
        </el-table-column>
        <el-table-column prop="price" label="价格(元)"> </el-table-column>
        <el-table-column prop="inventory" align="center" label="库存">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button type="primary" @click="pre_order(row)">充值</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import * as api from "../../../../api/index";
import { mapMutations, mutations } from "vuex";
export default {
  data() {
    return {
      vipList: [],
    };
  },
  methods: {
    ...mapMutations(["SET_CURRENT_CHARGE_PRODUCT"]),
    pre_order(row) {
      this.$confirm(
        `你正在购买${row.productName}, 是确认?${row.description}`,
        "购买提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      )
        .then(() => {
          //1.将当前购买的商品,存到vuex
          this.SET_CURRENT_CHARGE_PRODUCT(row);
          //2.跳转到order页面
          this.$router.push({ name: "pre_order" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消购买",
          });
        });
    },
  },
  created() {
    api.getVipListApi("20210827165510715").then((res) => {
      console.log(res);
      if (res.status == 200) {
        this.vipList = res.data.data;
      }
    });
  },
};
</script>
<style lang="less" scoped>
div {
  margin-top: 10px;
}
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
</style>